{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文心小课堂</title>
    <link  rel="stylesheet" href="{% static 'css/index.css' %}">
    <!-- 引入必要的库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/github.min.css">
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
    <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
    
    <style>
        /* 基础样式重置 */
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        
        body {
            font-family: 'Helvetica Neue', Arial, sans-serif;
            line-height: 1.6;
            color: #333;
        }
        
        /* 加载动画样式 */
        .loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.7);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            display: none;
        }
        .loading-spinner {
            border: 5px solid #f3f3f3;
            border-top: 5px solid #5e3d9e;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            animation: spin 1s linear infinite;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    </style>
</head>
<body style="margin: 0;">
    <!-- 加载动画 -->
    <div class="loading-overlay" id="loadingOverlay">
        <div class="loading-spinner"></div>
    </div>
    <!-- 导航栏 -->
    <div style="background-color: #ffffff; padding: 15px 250px;">
        <a href="./" class="title">
          <strong>文心小课堂</strong>
        </a>
    </div>
    
    <div style="display: flex; flex-direction: column; height: 100vh;">
        <!-- 上部分 -->
      <div style="background-color: rgb(248,247,252); flex: 25%;text-align: center;">
        
        <h1 style="margin-top: 4%;font-family:'黑体';font-size: 40px;">
            新一代交互式知识学习引擎
        </h1>
        <form style="margin-top: 3%;" onsubmit="return false;" >
            <div style="display: flex; justify-content: center;">
                <div style="display: flex; justify-content: center; align-items: center;">
                  <!-- 选项框位置 -->
                  
                  <select id="modelSelect" class="index_ModelSelect">
                      <option value="ernie-3.5-8k">ernie-3.5-8k</option>
                      <option value="ernie-4.5-8k-preview">ernie-4.5-8k-preview</option>
                      <option value="ernie-4.0-8k">ernie-4.0-8k</option>
                      <option value="deepseek-v3">deepseek-v3</option>
                  </select>
               
                
                  <input id="question" class="index_Question" placeholder="请输入您的问题"  >
                  <button class="btn" onclick="submitQuestion(this)">
                    开始学习
                  </button>
                </div>
            </div>
        </form>               
        <p>   
            尝试输入“机器学习”等你要学习的关键词
        </p>  
       </div>
      
      <!-- 下部分 -->
      <div id = "section" style="background-color: rgb(248,247,252); display: none; flex-direction: column; flex: 75%; "><!-- 子元素按照垂直方向向下排序 -->
        <!-- 下方-----上半部分 -->
        <div style="flex: 50%; display: flex;">
            <!-- 左上分区 -->
            <div style="flex: 50%;">
                <a style="color: rgb(83, 83, 83); cursor: pointer;"  onclick="sendDataToModPage('title-box1', 'content-box1'); "> 
                    <div class="carddiy" style="height: 230px; width: 60%;margin-top: 3%;margin-left: 35%;">
                      <div class="top">
                        <svg xmlns="http://www.w3.org/2000/svg" class ="svg2"height="1em" viewBox="0 0 576 512">
                          <style> .svg2{fill:#b197fc;height: 40px;width: 40px;}</style>
                          <path d="M386.539 111.485l15.096 248.955-10.979-.275c-36.232-.824-71.64 8.783-102.657 27.997-31.016-19.214-66.424-27.997-102.657-27.997-45.564 0-82.07 10.705-123.516 27.723L93.117 129.6c28.546-11.803 61.484-18.115 92.226-18.115 41.173 0 73.836 13.175 102.657 42.544 27.723-28.271 59.013-41.721 98.539-42.544zM569.07 448c-25.526 0-47.485-5.215-70.542-15.645-34.31-15.645-69.993-24.978-107.871-24.978-38.977 0-74.934 12.901-102.657 40.623-27.723-27.723-63.68-40.623-102.657-40.623-37.878 0-73.561 9.333-107.871 24.978C55.239 442.236 32.731 448 8.303 448H6.93L49.475 98.859C88.726 76.626 136.486 64 181.775 64 218.83 64 256.984 71.685 288 93.095 319.016 71.685 357.17 64 394.225 64c45.289 0 93.049 12.626 132.3 34.859L569.07 448zm-43.368-44.741l-34.036-280.246c-30.742-13.999-67.248-21.41-101.009-21.41-38.428 0-74.385 12.077-102.657 38.702-28.272-26.625-64.228-38.702-102.657-38.702-33.761 0-70.267 7.411-101.009 21.41L50.298 403.259c47.211-19.487 82.894-33.486 135.045-33.486 37.604 0 70.817 9.606 102.657 29.644 31.84-20.038 65.052-29.644 102.657-29.644 52.151 0 87.834 13.999 135.045 33.486z"/>
                        </svg>
                      </div>
                      <div style="text-align: left; padding-left: 10px;  margin: 0;margin-top: 3%;">
                        <h6 class=" bottom" style="font-size: 24px;  margin: 0;" id="title-box1"></h6>
                        <p style="font-size: 15px; text-indent: 2em; margin-top: 14px; " id="content-box1"> 
                        </p> 
                      </div>
                    </div>
                  </a>
            </div>
            <!-- 右上分区 -->
            <div style="flex: 50%;">
                <a style="color: rgb(83, 83, 83); cursor: pointer;"  onclick="sendDataToModPage('title-box2', 'content-box2'); "> 
                    <div class="carddiy" style="height: 230px; width: 60%;margin-top: 3%;margin-left: 5%;">
                      <div class="top">
                        <svg xmlns="http://www.w3.org/2000/svg" class ="svg2"height="1em" viewBox="0 0 576 512">
                          <style> .svg2{fill:#b197fc;height: 40px;width: 40px;}</style>
                          <path d="M386.539 111.485l15.096 248.955-10.979-.275c-36.232-.824-71.64 8.783-102.657 27.997-31.016-19.214-66.424-27.997-102.657-27.997-45.564 0-82.07 10.705-123.516 27.723L93.117 129.6c28.546-11.803 61.484-18.115 92.226-18.115 41.173 0 73.836 13.175 102.657 42.544 27.723-28.271 59.013-41.721 98.539-42.544zM569.07 448c-25.526 0-47.485-5.215-70.542-15.645-34.31-15.645-69.993-24.978-107.871-24.978-38.977 0-74.934 12.901-102.657 40.623-27.723-27.723-63.68-40.623-102.657-40.623-37.878 0-73.561 9.333-107.871 24.978C55.239 442.236 32.731 448 8.303 448H6.93L49.475 98.859C88.726 76.626 136.486 64 181.775 64 218.83 64 256.984 71.685 288 93.095 319.016 71.685 357.17 64 394.225 64c45.289 0 93.049 12.626 132.3 34.859L569.07 448zm-43.368-44.741l-34.036-280.246c-30.742-13.999-67.248-21.41-101.009-21.41-38.428 0-74.385 12.077-102.657 38.702-28.272-26.625-64.228-38.702-102.657-38.702-33.761 0-70.267 7.411-101.009 21.41L50.298 403.259c47.211-19.487 82.894-33.486 135.045-33.486 37.604 0 70.817 9.606 102.657 29.644 31.84-20.038 65.052-29.644 102.657-29.644 52.151 0 87.834 13.999 135.045 33.486z"/>
                        </svg>
                      </div>
                      <div style="text-align: left; padding-left: 10px;  margin: 0;margin-top: 3%;">
                        <h6 class=" bottom" style="font-size: 24px;  margin: 0;" id="title-box2"></h6>
                        <p style="font-size: 15px; text-indent: 2em; margin-top: 14px; " id="content-box2"> 
                        </p> 
                      </div>
                    </div>
                  </a>
            </div>
        </div>
    
        <!-- 下方-----下半部分 -->
        <div style="flex: 50%; display: flex;">
            <!-- 左下分区 -->
            <div style="flex: 50%;">
                <a style="color: rgb(83, 83, 83); cursor: pointer;"  onclick="sendDataToModPage('title-box3', 'content-box3'); "> 
                    <div class="carddiy" style="height: 230px; width: 60%;margin-top: 3%;margin-left: 35%;">
                      <div class="top">
                        <svg xmlns="http://www.w3.org/2000/svg" class ="svg2"height="1em" viewBox="0 0 576 512">
                          <style> .svg2{fill:#b197fc;height: 40px;width: 40px;}</style>
                          <path d="M386.539 111.485l15.096 248.955-10.979-.275c-36.232-.824-71.64 8.783-102.657 27.997-31.016-19.214-66.424-27.997-102.657-27.997-45.564 0-82.07 10.705-123.516 27.723L93.117 129.6c28.546-11.803 61.484-18.115 92.226-18.115 41.173 0 73.836 13.175 102.657 42.544 27.723-28.271 59.013-41.721 98.539-42.544zM569.07 448c-25.526 0-47.485-5.215-70.542-15.645-34.31-15.645-69.993-24.978-107.871-24.978-38.977 0-74.934 12.901-102.657 40.623-27.723-27.723-63.68-40.623-102.657-40.623-37.878 0-73.561 9.333-107.871 24.978C55.239 442.236 32.731 448 8.303 448H6.93L49.475 98.859C88.726 76.626 136.486 64 181.775 64 218.83 64 256.984 71.685 288 93.095 319.016 71.685 357.17 64 394.225 64c45.289 0 93.049 12.626 132.3 34.859L569.07 448zm-43.368-44.741l-34.036-280.246c-30.742-13.999-67.248-21.41-101.009-21.41-38.428 0-74.385 12.077-102.657 38.702-28.272-26.625-64.228-38.702-102.657-38.702-33.761 0-70.267 7.411-101.009 21.41L50.298 403.259c47.211-19.487 82.894-33.486 135.045-33.486 37.604 0 70.817 9.606 102.657 29.644 31.84-20.038 65.052-29.644 102.657-29.644 52.151 0 87.834 13.999 135.045 33.486z"/>
                        </svg>
                      </div>
                      <div style="text-align: left; padding-left: 10px;  margin: 0;margin-top: 3%;">
                        <h6 style="font-size: 24px;  margin: 0;" id="title-box3"></h6>
                        <p style="font-size: 15px; margin-top: 14px; text-indent: 2em;" id="content-box3"> <!-- 首行缩进 -->
                        </p> 
                      </div>
                    </div>
                  </a>
            </div>
            <!-- 右下分区 -->
            <div style="flex: 50%;">
                <a style="color: rgb(83, 83, 83); cursor: pointer;"  onclick="sendDataToModPage('title-box4', 'content-box4'); "> 
                    <div class="carddiy" style="height: 230px; width: 60%;margin-top: 3%;margin-left: 5%;">
                      <div class="top">
                        <svg xmlns="http://www.w3.org/2000/svg" class ="svg2"height="1em" viewBox="0 0 576 512">
                          <style> .svg2{fill:#b197fc;height: 40px;width: 40px;}</style>
                          <path d="M386.539 111.485l15.096 248.955-10.979-.275c-36.232-.824-71.64 8.783-102.657 27.997-31.016-19.214-66.424-27.997-102.657-27.997-45.564 0-82.07 10.705-123.516 27.723L93.117 129.6c28.546-11.803 61.484-18.115 92.226-18.115 41.173 0 73.836 13.175 102.657 42.544 27.723-28.271 59.013-41.721 98.539-42.544zM569.07 448c-25.526 0-47.485-5.215-70.542-15.645-34.31-15.645-69.993-24.978-107.871-24.978-38.977 0-74.934 12.901-102.657 40.623-27.723-27.723-63.68-40.623-102.657-40.623-37.878 0-73.561 9.333-107.871 24.978C55.239 442.236 32.731 448 8.303 448H6.93L49.475 98.859C88.726 76.626 136.486 64 181.775 64 218.83 64 256.984 71.685 288 93.095 319.016 71.685 357.17 64 394.225 64c45.289 0 93.049 12.626 132.3 34.859L569.07 448zm-43.368-44.741l-34.036-280.246c-30.742-13.999-67.248-21.41-101.009-21.41-38.428 0-74.385 12.077-102.657 38.702-28.272-26.625-64.228-38.702-102.657-38.702-33.761 0-70.267 7.411-101.009 21.41L50.298 403.259c47.211-19.487 82.894-33.486 135.045-33.486 37.604 0 70.817 9.606 102.657 29.644 31.84-20.038 65.052-29.644 102.657-29.644 52.151 0 87.834 13.999 135.045 33.486z"/>
                        </svg>
                      </div>
                      <div style="text-align: left; padding-left: 10px;  margin: 0;margin-top: 3%;">
                        <h6 class=" bottom" style="font-size: 24px;  margin: 0;" id="title-box4"></h6>
                        <p style="font-size: 15px; text-indent: 2em; margin-top: 14px; " id="content-box4"> 
                        </p> 
                      </div>
                    </div>
                  </a>
            </div>
        </div>
        <!-- 教程显示区域 -->
        <div id="tutorial-container" style="display: none; margin: 20px; padding: 20px; background: white; border-radius: 8px;">
            <h3 id="tutorial-title" style="color: #5e3d9e;"></h3>
        <div id="tutorial-content" class="markdown-body" style="padding: 20px; max-width: 100%; overflow-wrap: break-word;"></div>
        </div>
      </div>
    </div>

    <script>
        // 初始化Marked.js配置
        marked.setOptions({
            breaks: true,
            gfm: true,
            highlight: function(code, lang) {
                const language = hljs.getLanguage(lang) ? lang : 'plaintext';
                return hljs.highlight(code, { language }).value;
            }
        });

        let question = "";
        
        function showLoading() {
            document.getElementById('loadingOverlay').style.display = 'flex';
        }
        
        function hideLoading() {
            document.getElementById('loadingOverlay').style.display = 'none';
        }

        function sendDataToModPage(titleId, contentId) {
            const moduleTitle = document.getElementById(titleId).innerText;
            if (!moduleTitle) return;
            
            showLoading();
            fetch(`/generate-tutorial/?module_title=${encodeURIComponent(moduleTitle)}`)
                .then(response => response.json())
                .then(data => {
                    document.getElementById('tutorial-title').innerText = moduleTitle;
                    // 渲染Markdown和LaTeX
                    const tutorialContent = document.getElementById('tutorial-content');
                    tutorialContent.innerHTML = marked.parse(data.tutorial);
                    MathJax.typeset();
                    // 高亮代码块
                    document.querySelectorAll('pre code').forEach((block) => {
                        hljs.highlightElement(block);
                    });
                    document.getElementById('tutorial-container').style.display = 'block';
                    hideLoading();
                })
                .catch(error => {
                    console.error('Error:', error);
                    hideLoading();
                });
        }

        function submitQuestion(buttonElement) {
            showLoading();
            const questionInput = document.getElementById('question').value.trim();
            const modelSelect = document.getElementById('modelSelect').value;
            if (questionInput === "") {
                hideLoading();
                return;
            }
            buttonElement.innerText = '正在加载...';
            buttonElement.disabled = true;
            question = questionInput;
            fetch(`/ask?question=${encodeURIComponent(question)}&model=${encodeURIComponent(modelSelect)}`)
                .then(response => response.json())
                .then(data => {
                    console.log(data);
                    for (let i = 0; i < data.length; i++) {
                        let moduleTitle = data[i]["模块主题"];
                        let moduleContent = data[i]["本模块内容简介"];
                        document.getElementById(`title-box${i + 1}`).innerText = moduleTitle;
                        // 渲染模块内容的Markdown
                        const contentBox = document.getElementById(`content-box${i + 1}`);
                        contentBox.innerHTML = marked.parse(moduleContent);
                        MathJax.typeset();
                        const section = document.getElementById("section");
                        section.style.display = "block";
                    }
                    buttonElement.innerText = '开始学习';
                    buttonElement.disabled = false;
                    hideLoading();
                })
                .catch((error) => {
                    console.error('Error:', error);
                    buttonElement.innerText = '开始学习';
                    buttonElement.disabled = false;
                    hideLoading();
                });
        }
    </script>
    

    </body>
</html>


